<template>
  <div class="content">
    <!-- 头部 -->
    <div>
      <shopping-header></shopping-header>
    </div>
    <!-- 商品展示 -->
    <div class="goods-show">
      <div class="tab-title">
        <div
          class="title-item"
          v-for="(title, index) in tabTitle"
          :key="title"
          @click="currentIndex = index"
        >
          {{ title }}
          <img
            style="display: inline-block; height: 13px; width: 1px"
            src="../../assets/separator.png"
          />
        </div>
      </div>
      <div class="tab-content">
        <goods-list :currentIndex="currentIndex"></goods-list>
      </div>
    </div>
  </div>
</template>

<script>
import goodsList from "./components/goods-list.vue";
import shoppingHeader from "./components/shopping-header.vue";

export default {
  components: {
    goodsList,
    shoppingHeader,
  },
  data() {
    return {
      tabTitle: ["综合", "新品", "销量", "价格"],
      currentIndex: 0, //默认选中第一个tab
    };
  },
};
</script>

<style src="./css/shoppingMall.css" scoped>
</style>